<template>
  <div class="calendar_item">
    <div class="line" :class="[{ 'active': isUp }]"></div>
    <span class="calendar_item__title">{{ title }}</span>
    <div class="calendar_item__level">
      <span>{{ time }}</span>
      <icon-ph-arrow-up-bold v-if="isUp" class="calendar_item__icon" />
      <icon-ph-arrow-down-bold class="calendar_item__icon" v-else />
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{ title: string, time: string, isUp: boolean }>()

</script>


<style lang="scss" scoped>
.calendar_item {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: rgba($color: #7D8592, $alpha: .06);
  border-radius: 10px;
  justify-content: center;
  padding: 4px 12px 4px 20px;
  text-align: left;
  gap: 4px;

  .line {
    position: absolute;
    width: 4px;
    height: 80%;
    left: 4px;
    border-radius: 10px;

    &.active {
      background-color: #3F8CFF;
    }

    background-color: rgba($color: #DE92EB, $alpha: .5);
  }

  &__title {
    font-size: 12px;
    font-weight: 560;
  }

  &__level {
    display: flex;
    align-items: center;
    gap: 4px;

    >span {
      font-size: 12px;
      color: rgba($color: #0A1629, $alpha: .4);

    }
  }

  &__icon {
    color: #0AC947;
    font-size: 14px;
  }
}
</style>